<!--
 * hi-gap - 间隔
 *
 * @author 济南晨霜信息技术有限公司
 * @mobile 18560000860 / 18754137913
 -->
<template>
    <view class="page-view">
        <!-- 基础使用 -->
        <module-demo title="基础使用">
            <hi-gap></hi-gap>
            <hi-gap size="30rpx"></hi-gap>
            <hi-gap size="40rpx"></hi-gap>
            <hi-gap size="50rpx"></hi-gap>
        </module-demo>

        <!-- 可以是负值 -->
        <module-demo title="可以是负值" tips="如果有虚拟节点，负值不生效">
            <view class="text">岑夫子，丹丘生，将进酒，杯莫停。</view>
            <hi-gap size="-60rpx"></hi-gap>
            <view class="text">与君歌一曲，请君为我倾耳听。</view>
        </module-demo>
    </view>
</template>

<script setup></script>

<style lang="scss" scoped>
    :deep(.module-demo__body) {
        align-items: stretch;
    }

    :deep(.hi-gap) {
        background: var(--hi-background-default);
    }

    .text {
        text-align: center;
    }
</style>
